<template>
  <div id='home'>
    <van-nav-bar class="app-nav-bar">
      <template #title> 购物街 </template>
    </van-nav-bar>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in banners" :key="index">
        <div><img :src="image.image"  /></div>
      </van-swipe-item>
    </van-swipe>
    <ul v-for="(image, index) in banners.image" :key="index">
      <li><img :src="image" /></li>
    </ul>
    <van-grid :border="false" :column-num="4" icon-size="20px">
      <van-grid-item v-for="(image, index) in recommends" :key="index">
        <van-image :src="image.image" icon-size="10px" />
        <van-grid-item :text="image.title" />
      </van-grid-item>
    </van-grid>
    <div class="tuijian">本周推荐</div>

    <van-grid :border="false" :column-num="3" >
      <van-grid-item  v-for="(item, index) in grid" :key="index">
        <van-image :src="item.photo"   class="imgsize"/>
        <van-grid-item :text="item.text" />
      </van-grid-item>
    </van-grid>
<van-tabs v-model="activeName" sticky>
  <van-tab title="流行" name="pop"><goodslist :goods="goods['pop'].list"></goodslist>  </van-tab>
  <van-tab title="精品" name="new"><goodslist :goods="goods['new'].list"></goodslist></van-tab>
  <van-tab title="新款" name="sell"><goodslist :goods="goods['sell'].list"></goodslist></van-tab>
</van-tabs>
  
  </div>
  <backtop   v-show="showTop"></backtop>
</template>

<script>
import Navbar from "../../components/common/navbar/navbar";
import Swiper from "../../components/common/swiper/swiper.vue";
import goodslist from "../../components/common/goods/goodslist";
import { gethome ,getgoods } from "../../network/home";
import Backtop from '../../components/content/backtop/backtop.vue';
export default {
  name: "home",
  data() {
    return {
      banners: [],
      recommends: [],
      text: ["十点抢卷", "特价特卖", "内购福利", "初秋上新"],
      grid: [
        {
          text: "帅气身影",
          icon: "n",
        photo: require("../../assets/img/4.jpg"),
        },
        {
          text: "绝美外套",
          icon: "w",
          photo: require("../../assets/img/2.jpg"),
        },
        {
          text: "裤子专区",
          icon: "j",
          photo: require("../../assets/img/3.jpg"),
        },
        {
          text: "关于爱情",
          icon: "g",
          photo: require("../../assets/img/4.jpg"),
        },
        {
          text: "套装选购",
          icon: "h",
        photo: require("../../assets/img/3.jpg"),
        },
        {
          text: "套餐推荐",
          icon: "template",
         photo: require("../../assets/img/2.jpg"),
        },
      ],
      activeName:'a',
      goods:{
        'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
            'sell':{page:0,list:[]},
      },
	  currentType: 'pop',
	  showTop: true,

    };
  },
  components: {
    Navbar,
    Swiper,
   goodslist,
   Backtop
  },
  created() {
    gethome().then((res) => {
      this.banners = res.data.banner.list;
      this.recommends = res.data.recommend.list;
      console.log(res)
    });
    
   this.getgood('pop')
     this.getgood('new')
       this.getgood('sell')
  },
  methods: {   
    getgood(type){
   const page=this.goods[type].page+1
     getgoods(type,page).then(res=>{
     console.log(res)
      this.goods[type].list.push(...res.data.list)
       this.goods[type].page+=1
    })
    },
  },
};
</script>


<style lang="scss" scoped>
#home{
  height: 100vh;
  position: relative;
}
::v-deep .app-nav-bar{
  padding: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
}
.van-nav-bar {
  background: rgb(226, 6, 116);
}
.tuijian {
  text-align: center;
   padding-bottom: 20px;
}
.pad {
  padding-bottom: 20px;
}
img {
  width: 100%; 
  height: 100%;
}
 ::v-deep .imgsize{
    width: 100%;
    height: 100%;
  
}
.content{
 overflow: hidden;
 position: absolute;
 top: 46px;
 bottom: 49px;
 left: 0;
 right: 0;
}
</style>